<template>
  <div class="login-wrapper">
    <el-image :src="src" class="login-bg"></el-image>
    <div class="text">爱岗敬业、开拓进取、</div>
    <div class="text text1">创新服务、放眼未来</div>
    <el-collapse-transition>
      <el-card class="box-card" v-show="show">
        <div class="center login-title">津房置换 业务系统</div>
        <el-divider content-position="center">账号密码登录</el-divider>
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="rules"
          class="login-form"
        >
          <el-form-item prop="UName">
            <el-input
              placeholder="请输入用户名"
              prefix-icon="el-icon-user"
              v-model="loginForm.UName"
              auto-complete="off"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="UPass">
            <el-input
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              v-model="loginForm.UPass"
              auto-complete="off"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <el-row>
          <Vcode :show="visible" @success="success" @close="close" />
          <el-button
            type="primary"
            size="medium"
            class="mb20"
            style="width: 100%"
            plain
            @click="visible = !visible"
            >点击完成验证</el-button
          >
        </el-row>
        <el-row>
          <el-button
            :loading="loading"
            type="primary"
            size="medium"
            style="width: 100%"
            @click="submitLogin"
          >
            <span v-if="!loading">登录</span>
            <span v-else>登录中...</span>
          </el-button>
        </el-row>
        <div class="right mt10">
          <el-link type="primary" @click="changePassword">忘记密码</el-link>
        </div>
      </el-card>
    </el-collapse-transition>
    <div class="decorate"></div>
    <div class="decorate decorate1"></div>
    <div class="decorate decorate2"></div>
    <div class="decorate decorate3"></div>
    <div class="decorate decorate4"></div>
    <div class="decorate decorate5"></div>
  </div>
</template>
<script>
import Vcode from "vue-puzzle-vcode";
export default {
  name: "Login",
  components: {
    Vcode,
  },
  data() {
    return {
      src: require("../assets/bg.png"),
      loginForm: {
        UName: "",
        UPass: "",
      },
      show: true,
      visible: false,
      rules: {
        UName: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
        UPass: [{ required: true, message: "密码不能为空", trigger: "blur" }],
      },
      loading: false,
      codeCheck: false, //图形验证
    };
  },
  methods: {
    submitLogin() {
      // if (!this.codeCheck) {
      //   this.$message.error("请进行图片验证");
      //   return;
      // }
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("Login", this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || "/" });
            })
            .catch(() => {
              this.loading = false;
              this.codeCheck = false;
            });
          // console.log(1)
          //  this.$router.push({ path: this.redirect || "/" });
        } else {
          console.log(valid);
          return false;
        }
      });
     
    },
    //忘记密码
    changePassword() {},
    // 用户通过了验证
    success(msg) {
      console.log(msg);
      this.codeCheck = true;
      this.visible = false; // 通过验证后，需要手动隐藏模态框
    },
    // 用户点击遮罩层，应该关闭模态框
    close() {
      this.visible = false;
    },
  },
};
</script>
<style lang="stylus" scoped>
from-left = 300px;

reduce(a, b) {
  a - b;
}

.login-wrapper {
  background-image: linear-gradient(to bottom, #1196ee, #0b649f);
  height: 100vh;
  position: relative;

  .login-title {
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 30px;
  }

  .login-bg {
    width: 50%;
    transform: translate(85%, 33%);
  }

  .login-form {
    margin-top: 40px;
  }

  .decorate {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-image: radial-gradient(circle, #ffffff, #e1e1e1, white);
    position: absolute;
    bottom: -180px;
    left: 0;
  }

  .decorate1 {
    bottom: -120px;
    left: reduce(from-left, 10);
  }

  .decorate2 {
    bottom: -200px;
    left: reduce(from-left * 2, 10 * 2);
  }

  .decorate3 {
    bottom: -130px;
    left: reduce(from-left * 3, 10 * 3);
  }

  .decorate4 {
    bottom: -200px;
    left: reduce(from-left * 4, 10 * 4);
  }

  .decorate5 {
    bottom: -250px;
    left: reduce(from-left * 5, 10 * 5);
  }

  .box-card {
    width: 340px;
    height: 420px;
    position: fixed;
    top: 120px;
    left: 180px;
  }

  .text {
    font-size: 24px;
    font-weight: 500;
    color: #ffffff;
    position: fixed;
    top: 90px;
    right: 500px;
  }

  .text1 {
    right: 300px;
    top: 120px;
  }
}
</style>
